<template>
	<view class="suggestion-box">
		<view class="form-s">
			<uni-forms :modelValue="formData">
				<view class="form-1">
					<view class="view">管家: {{formData.steward}}</view>
					<span class="tags-icon color-icon-1" v-if="formData.commentType == 1">新租</span>
					<span class="tags-icon color-icon-2" v-if="formData.commentType == 2">续租</span>
					<span class="tags-icon color-icon-3" v-if="formData.commentType == 3">退租</span>
					<span class="tags-icon color-icon-4" v-if="formData.commentType == 4">员工入住评价</span>
					<span class="tags-icon color-icon-3" v-if="formData.commentType == 5">员工迁出</span>
				</view>
				<uni-forms-item class="uni-form-label">
					<view class="uni-label">管家服务</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.stewardScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 1 || formData.commentType == 4">
					<view class="uni-label">房屋环境</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.houseScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 1 || formData.commentType == 4">
					<view class="uni-label">物业环境</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.propertyEnvScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 1 || formData.commentType == 4">
					<view class="uni-label">周边配套</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.aroundSupportScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 1 || formData.commentType == 4">
					<view class="uni-label">入住满意度</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.checkInFeelScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 1">
					<view class="uni-label">线上运营</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.onlineScore" margin="8" />
				</uni-forms-item>

				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 2">
					<view class="uni-label">物业服务</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.propertyScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 2">
					<view class="uni-label">续租便捷度</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.reletConvenienceScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 2">
					<view class="uni-label">整体满意度</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.overallScore" margin="8" />
				</uni-forms-item>

				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 3 || formData.commentType == 5">
					<view class="uni-label">居住舒适度</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.livingScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 3 || formData.commentType == 5">
					<view class="uni-label">{{formData.commentType == 3?'退租便捷度':'迁出便捷度'}}</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.rentOutConvenienceScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 3 || formData.commentType == 5">
					<view class="uni-label">二次入住与推荐</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.recommendScore" margin="8" />
				</uni-forms-item>
				<uni-forms-item class="uni-form-label" v-if="formData.commentType == 3 || formData.commentType == 5">
					<view class="uni-label">品牌总体评价</view>
					<uni-rate class="uni-rate" :max="5" :disabled="isedit" disabledColor="rgba(253, 150, 24, 1)" v-model="formData.brandScore" margin="8" />
				</uni-forms-item>
				<view class="uni-sug">
					<view class="uni-sug-label">您的建议</view>
					<view class="uni-sug-t">
						<textarea class="uni-sug-textarea" :disabled="isedit" maxlength="150" v-model="formData.content" placeholder="请填写服务内容"></textarea>
					</view>
				</view>
				<view class="uni-sug">
					<view class="uni-sug-label">图片:<span></span></view>
					<view>
						 <image class="uni-img" v-for="(item,index) in formData.picture" :key="index" @click="previewImage(item)" :src="item"></image>
					</view>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive,ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { getSuggestionDetail,getMessageDetail } from "@/common/API/notice"

	const otherFormData = reactive({
		commentType: null,//评价类型1-新租,2-续租,3-退租,4-企业入住人评价,5-员工迁出评价
		roomId: null,//房源id
		signDay: null,//签约日期
		stewardId: null,//管家id
		steward: null,//管家
		id: null,
		stewardScore: null,//管家服务
		houseScore: null,//房屋环境
		propertyEnvScore: null,//物业环境
		aroundSupportScore: null,//周边配套
		checkInFeelScore: null,//入住满意度
		onlineScore: null,//线上运营
		propertyScore: null,//物业服务
		reletConvenienceScore: null,//续租便捷度
		overallScore: null,//整体满意度
		livingScore: null,//居住舒适度
		rentOutConvenienceScore: null,//退租、迁出便捷度
		recommendScore: null,//二次入住与推荐
		brandScore: null,//品牌总体评价
		content: null,
		picture: []
	})
	const isedit = ref(true)
	let formData = reactive({})

	//评价详情
	const getDetail = async () => {
		let res = await getSuggestionDetail(formData.id)
		if(res){
			let info = res
			formData.steward = info.steward //管家
			formData.stewardScore =  info.stewardScore//管家服务
			formData.houseScore =  info.houseScore//房屋环境
			formData.propertyEnvScore =  info.propertyEnvScore//物业环境
			formData.aroundSupportScore =  info.aroundSupportScore//周边配套
			formData.checkInFeelScore =  info.checkInFeelScore//入住满意度
			formData.onlineScore =  info.onlineScore//线上运营
			formData.propertyScore =  info.propertyScore//物业服务
			formData.reletConvenienceScore =  info.reletConvenienceScore//续租便捷度
			formData.overallScore =  info.overallScore//整体满意度
			formData.livingScore =  info.livingScore//居住舒适度
			formData.rentOutConvenienceScore =  info.rentOutConvenienceScore//退租、迁出便捷度
			formData.recommendScore =  info.recommendScore//二次入住与推荐
			formData.brandScore = info.brandScore //品牌总体评价
			formData.content =  info.content
			if(info.picture){
				info.picture = info.picture.split(',')
				formData.picture = info.picture
			}
		}
	}
	//消息详情
	const getMessage = async () => {
		let res = await getMessageDetail(formData.id)

		if(res){
			let info = res
			formData.commentType = info.commentType
			formData.steward = info.steward //管家
			formData.stewardScore =  info.stewardScore//管家服务
			formData.houseScore =  info.houseScore//房屋环境
			formData.propertyEnvScore =  info.propertyEnvScore//物业环境
			formData.aroundSupportScore =  info.aroundSupportScore//周边配套
			formData.checkInFeelScore =  info.checkInFeelScore//入住满意度
			formData.onlineScore =  info.onlineScore//线上运营
			formData.propertyScore =  info.propertyScore//物业服务
			formData.reletConvenienceScore =  info.reletConvenienceScore//续租便捷度
			formData.overallScore =  info.overallScore//整体满意度
			formData.livingScore =  info.livingScore//居住舒适度
			formData.rentOutConvenienceScore =  info.rentOutConvenienceScore//退租、迁出便捷度
			formData.recommendScore =  info.recommendScore//二次入住与推荐
			formData.brandScore = info.brandScore //品牌总体评价
			formData.content =  info.content
			if(info.picture){
				info.picture = info.picture.split(',')
				formData.picture = info.picture
			}
		}
	}
	//预览
	const previewImage = (url) => {
		console.log(url)
		let arr = []
		arr[0] = url
		uni.previewImage({
			urls: arr,
			current:0
		})
	}
	onLoad((options)=>{
		if(options){
			formData.id = options.id
			//消息详情
			if(options.from){
				getMessage()
			}else{//评价详情
				formData.commentType = options.commentType
				getDetail()
			}
		}
	})
</script>
<style>
	page {
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.suggestion-box {
		padding-bottom: 32rpx;
		.form-s {
			// padding: 0 28rpx;
		}
		.form-1 {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			.tags-icon {
				padding: 4rpx 16rpx;
				display: inline-block;
				color: #fff;
				border-radius: 4rpx;
				font-size: 40rpx;
				transform: scale(0.5);
				margin-right: -30rpx;
			}
			.view {
				flex: 1;
			}
			.color-icon-1 {
				background: rgba(67, 207, 124, 1);
			}
			.color-icon-2 {
				background: rgba(0, 178, 255, 1);
			}
			.color-icon-3 {
				background: rgba(242, 85, 85, 1);
			}
			.color-icon-4 {
				background: rgba(253, 150, 24, 1);
			}
		}
		:deep(.uni-forms){
			margin: 0 32rpx;
		}

		.uni-form-label{
			padding: 26rpx 0 20rpx 0;
			// border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 0;
			:deep(.uni-label){
				width: 350rpx;
			}
			::v-deep .uni-forms-item__label{
				display: none;
			}
		}
		:deep(.uni-forms-item__content){
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			padding: 10rpx 0;
		}
		:deep(.uni-rate){
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
		:deep(.uni-forms-item__label){
			padding: 0 4rpx 0 0;
		}

		:deep(.uni-sug-textarea){
			font-size: 28rpx;
			padding: 24rpx;
		}
		.uni-sug-t{
			width: 100%;
			// height: 316rpx;
			font-size: 28rpx;
			position: relative;
			background: rgba(245, 245, 245, 1);
			.span{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}
		:deep(.uni-forms-item){
			border-bottom: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 0;
			padding: 10rpx 0;
		}
		.uni-sug{
			margin-bottom: 0;
			display: block;

			.uni-sug-label{
				color: rgba(77, 77, 77, 1);
				font-size: 28rpx;
				padding: 20rpx 0;
				.span{
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.uni-img{
				width: 160rpx;
				height: 160rpx;
        margin-right: 10rpx;
			}
		}
	}
</style>
